<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <button @click="increment()">Increment</button>
    <button @click="decrement()">Decrement</button>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";

const counterStore = useCounterStore();
// 将解构出来的参数变成响应式
const { count, doubleCount } = storeToRefs(counterStore);
// 作为 action 的 increment 和 decrement 可以直接解构
const { increment, decrement } = counterStore;
</script>

<style scoped></style>
